import s from './WebTest.module.less'
import { useState } from 'react'
import { useLocalStorage } from '../use-locastorage'
import { stoerKeys } from '@renderer/store-keys'

const _defaultUrl = `https://10.23.7.131:37000`

export function WebTest(): JSX.Element {
  const [history, setHistory] = useLocalStorage<string[]>(stoerKeys.SERVER_HISTORY, [])
  const [defaultUrl] = useState(() => history[0] || _defaultUrl)
  const [server, setServer] = useState<string>(defaultUrl)

  const onConfirm = () => {
    const toServer = server || defaultUrl
    if (toServer) {
      const toHistory = history.slice(0, 20)
      window.open(toServer)
      if (toHistory.includes(toServer)) return
      setHistory([toServer, ...toHistory])
    }
  }

  return (
    <div className={s.webrtcTest}>
      <div className={s.inputLine}>
        <button onClick={onConfirm}>访问</button>
        <input
          value={server}
          placeholder={defaultUrl}
          onChange={(ev) => {
            setServer(ev.target.value)
          }}
        />
      </div>
      <div className={s.historyTitle}>历史记录</div>
      <div className={s.historyScrollContent}>
        {...history.map((h, index) => {
          return (
            <div
              className={s.historyItem}
              key={index}
              onClick={() => {
                setServer(h)
              }}
            >
              {h}
            </div>
          )
        })}
      </div>
    </div>
  )
}
